<template>
	<view class="content">
		<view class="section-1">
			<view class="list">
				<view @click="go()" class="item" v-for="item in list" :key="item.name">
					<view class="left">
						<view class="top">
							{{item.project_name}}
						</view>
						<view class="bottom">
							2020-10-10
						</view>
					</view>
					<view class="point">
						{{Math.round(Math.random()*100)}}<text>分</text>
					</view>
					<view class="action">
						<text class="iconfont icon-xiangyou1"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { unPerformListApi } from '@/api/duty.js';
	export default {
		data() {
			return {
				list:[]
			};
		},
		methods:{
			go() {
				uni.navigateTo({
					url: ''
				})
			},
			async fetchData() {
				uni.showLoading({title: '加载中...'});
				const { data } = await unPerformListApi();
				uni.hideLoading();
				if (data.code === 1) {
					this.list = data.data;
				} 
			}
		},
		onReady() {
			this.fetchData();
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #2d5dfd;
	}
	.section-1{
		position: relative;
		z-index: 10;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		.list{
			width: 670rpx;
			box-sizing: border-box;
			margin-left: 40rpx;
			padding-top: 35rpx;
			.item{
				width: 100%;
				border-radius: 35rpx;
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				box-sizing: border-box;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				padding: 28rpx;
				margin-bottom: 24rpx;
				position: relative;
				.left{
					float: left;
					width: calc(100% - 175rpx);
					.top{
						width: 100%;
						font-size: 26rpx;
						line-height: 30rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 2rpx;
						color: #3b3c40;
						word-break: break-all;
					}
					.bottom{
						width: 100%;
						font-size: 16rpx;
						color: #7f98ae;
						height: 20rpx;
						line-height: 20rpx;
						margin-top: 10rpx;
					}
				}
				.point{
					float: left;
					width: 115rpx;
					font-size: 40rpx;
					color: #1d33c6;
					font-weight: bold;
					text-align: left;
					position: absolute;
					height: 50rpx;
					line-height: 50rpx;
					top: 0;
					bottom: 0;
					margin: auto 0;
					right: 60rpx;
					text{
						font-size: 32rpx;
					}
				}
				.action {
					width: 32rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #3b3c40;
					flex: flex;
					align-items: center;
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto 0;
					right: 18rpx;
					.iconfont {
						font-size: 32rpx;
						transition: 0.2s ease;
						transform: rotate(90deg);
					}	
				}
			}
		}
		
	}
</style>

